<template>
  <div class="playermain">
     <p class= "playerhead"><i class="el-icon-s-promotion"> 球员列表 ></i></p>
     <div class="search">
      <el-input v-model="dataForm.key" placeholder="球员名" clearable></el-input>
      <el-button @click="getAll()">查询</el-button>
      </div>
     <div class="playerlist">
      <el-table
      :data="playinformation"
      border
      style="width: 100%;"
      @row-click="clickData">
       <el-table-column
        prop="cover"
        header-align="center"
        align="center"
        label="照片"
        width="150">
      <template slot-scope="scope">
       <img :src="scope.row.cover" alt="" style="width:100px;height:80px">
      </template>
      </el-table-column>
        <el-table-column
        prop="english"
        header-align="center"
        align="center"
        label="英文名"
        width="160">
      </el-table-column>
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="中文名"
        width="160">
      </el-table-column>
      <el-table-column
        prop="height"
        header-align="center"
        align="center"
        label="身高/米">
      </el-table-column>
      <el-table-column
        prop="wingspan"
        header-align="center"
        align="center"
        label="臂展/米"
       >
      </el-table-column>
      <el-table-column
        prop="country"
        header-align="center"
        align="center"
        label="国家">
      </el-table-column>
      <el-table-column
        prop="draft"
        header-align="center"
        align="center"
        label="选秀"
        width="150">
      </el-table-column>
      <el-table-column
        prop="salary"
        header-align="center"
        align="center"
        label="薪资/万美元">
      </el-table-column>
      <el-table-column
        prop="team"
        header-align="center"
        align="center"
        label="球队">
      </el-table-column>
       <el-table-column
        prop="number"
        header-align="center"
        align="center"
        label="号码">
      </el-table-column>
      <el-table-column
        prop="weight"
        header-align="center"
        align="center"
        label="体重/公斤">
      </el-table-column>
      <el-table-column
        prop="position"
        header-align="center"
        align="center"
        label="位置">
      </el-table-column>
     
    </el-table>
     </div>
  </div>
</template>

<script>
import player from '@/api/player'
  import moment from 'moment'
export default {
    data() {
      return{
         playinformation:[],
          dataForm: {
          key: ''
        }, 
      }
      },
      created(){
         this.getAll()
      },
       methods: {
         dateFormat:function(row,column){
        var date = row[column.property];
        if(date == undefined){return ''};
        return moment(date).format("YYYY-MM-DD")
      },
       clickData(row, event, column) {   
　　　　　　 this.$router.push({ path:'/player/'+row.id  })
       }  ,
           getAll(){
              player.getAll(this.dataForm.key)
              .then(response =>{
                this.playinformation = response.data.page.list
                console.log(this.playinformation)
              })
           }
       }
}
</script>

<style scoped>
.playermain{
   width:100%;
   background-color: rgb(238,238,238);
   padding-top:80px;
   display: inline-block;
   overflow: hidden;
   min-height: 1000px;
}
.playerhead{
    font-size:18px;
    position: relative;
    margin-left: 5%;
}
.el-icon-s-promotion{
    color:rgb(0,98,161)
}
.el-input{
  width: 200px;
}
.search{
  position: absolute;
  right: 5%;
  top:170px
}
.playerlist{
   width: 90%;
   min-height:800px;
   background-color:white;
   box-shadow: 0 0 10px #ddd;
   margin-top: 30px;
   position: relative;
   margin-left: 5%;
}
>>> .el-table__row{
  cursor: pointer;
}
</style>